<!--
 * @Descripttion: 概况
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 14:27:32
-->
<template>
  <el-row class="lb-survey" v-loading="loading">
    <div class="top-opertae">
      <span class="top-title">数据大盘</span>
      <div>
        <span>选择公司：</span>
        <el-select v-model="company_id" @change="getDataList(2)" placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <el-row class="lb-survey-container">
      <el-row :gutter="25">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="lb-s-con-items simple-data" v-for="(item,index) in simpleData" :key="index">
            <div class="simple-data-left">
              <div class="icons">
                <lb-image :src="item.icon"></lb-image>
              </div>
              <div>
                <p>{{item.lNum}}</p>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="simple-data-right">
              <p v-if="item.percentage" :style="item.up ? 'color: #20CA5C' : 'color: #F21018'">
                <i :class="item.up ? 'el-icon-top': 'el-icon-bottom'"></i>
                <span class="show-num">{{item.rNum}}%</span>
              </p>
              <p v-else>
                <!-- <i class="el-icon-top"></i> -->
                <span class="show-num">{{item.rNum}}</span>
              </p>
              <span>{{item.text}}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="lb-s-con-items chart">
            <item-header title="员工分布" btnTitle></item-header>
            <staff-echarts :datas="staffData" />
          </div>
        </el-col>
      </el-row>
      <el-col>
        <div class="lb-s-con-items in-common-use">
          <item-header title="常用功能" btnTitle></item-header>
          <div class="in-common-use-apps">
            <el-row :gutter="25">
              <el-col
                v-for="(item,index) in commonUseData"
                :key="index"
                :xs="8"
                :sm="8"
                :md="8"
                :lg="4"
                :xl="4"
              >
                <div @click="$router.push(item.url)" class="app-items">
                  <lb-image :src="item.icon"></lb-image>
                  <span>{{item.title}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-row>

</template>

<script>
import ItemHeader from './itemHeader'
import StaffEcharts from './staffEcharts'
import saleEcharts from './saleEcharts'
export default {
  data () {
    return {
      showInit: false,
      loading: false,
      company_id: 0,
      time: 7,
      saleRankEmpty: false,
      options: [
        {
          id: 0,
          name: '全部'
        }
      ],
      commonUseData: [
        {
          title: `${this.$t('menu.BusinessCard')}管理`,
          url: '/businessCard/staffCard',
          icon: require('@/assets/commonIcon/businessCard.png')
        },
        {
          title: '添加公司',
          icon: require('@/assets/commonIcon/company.png'),
          url: '/company/addCompany'
        },
        {
          title: '客户管理',
          icon: require('@/assets/commonIcon/customer.png'),
          url: '/customer/list'
        }
      ],
      customColors: [
        { color: '#9FCEFF', percentage: 20 },
        { color: '#8BC4FF', percentage: 40 },
        { color: '#78BAFF', percentage: 60 },
        { color: '#66B0FF', percentage: 80 },
        { color: '#409EFF', percentage: 100 }
      ],
      day_sales_amount: {
        sale_proportion: 0,
        sale_today: 0
      },
      simpleData: [],
      staffData: [],
      saleData: [],
      saleRank: []
    }
  },
  components: {
    ItemHeader,
    StaffEcharts,
    saleEcharts
  },
  created () {
    this.getCompanyList()
    this.getDataList()
  },
  mounted () {},
  methods: {
    getCompanyList () {
      this.$api.getSurveyCompanyList().then(res => {
        if (res.code === 200) {
          this.options.push(...res.data)
        }
      })
    },
    getDataList (flag) {
      this.loading = true
      if (flag === 2) {
        this.time = 7
      }
      this.$api.getSurveyData({ company_id: this.company_id, time: this.time }).then(res => {
        this.loading = false
        if (res.code === 200) {
          // if (flag === 1 && this.company_id) {
          //   this.saleData = res.data.sales_sum
          // } else {
          let numarr = res.data.sales_count.map(item => {
            return item.number
          })
          let maxNum = Math.max(...numarr)
          this.staffData = res.data.job_user
          // this.saleData = !this.company_id
          //   ? res.data.sales_sum.map(item => {
          //     item.name = item.short_name
          //     return item
          //   })
          //   : res.data.sales_sum
          if (res.data.sales_count.length) {
            this.saleRankEmpty = false
            this.saleRank = res.data.sales_count.map(item => {
              item.value =
                  maxNum > 0
                    ? parseInt(((item.number / maxNum) * 100).toFixed(0))
                    : 0
              return item
            })
          } else {
            this.saleRank = []
            this.saleRankEmpty = true
          }

          this.simpleData = [
            // {
            //   icon: require('@/assets/icon/1.png'),
            //   percentage: true,
            //   up: res.data.day_sales_amount.up > 0,
            //   test: res.data.day_sales_amount.up,
            //   title: '销售金额',
            //   text: '对比昨日',
            //   lNum: res.data.day_sales_amount.sale_today,
            //   rNum: Math.abs(res.data.day_sales_amount.sale_proportion)
            // },
            {
              icon: require('@/assets/icon/2.png'),
              percentage: true,
              up: res.data.today_user.up > 0,
              test: res.data.today_user.up,
              title: '新增客户数',
              text: '对比昨日',
              lNum: res.data.today_user.user_today,
              rNum: Math.abs(res.data.today_user.user_proportion)
            },
            {
              icon: require('@/assets/icon/3.png'),
              percentage: false,
              up: true,
              title: '员工数量',
              text: '剩余总数',
              lNum: res.data.surplus_staff_user,
              rNum: res.data.staff_user
            }
          ]
          // }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-survey {
  width: 100%;
  padding: 20px;
    background: $bgThemeColor;
  .top-opertae {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    .top-title {
      font-size: 25px;
      color: #333;
    }
  }
  .lb-s-con-items {
    min-height: 185px;
    // min-height: 120px;
    background: #ffffff;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  .simple-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    .icons {
      width: 60px;
      height: 60px;
      background: #1fd279;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 16px;
      overflow: hidden;
    }
    .simple-data-left {
      display: flex;
      align-items: center;
      p {
        color: #333333;
        font-size: 28px;
      }
    }
    .simple-data-right {
      border-left: 1px solid #eeeeee;
      width: 150px;
      height: 100%;
      padding-left: 40px;
      // color: #20CA5C;
      font-size: 12px;
      > span {
        color: #333333;
      }
      p {
        span {
          font-size: 28px;
        }
      }
    }
  }
  .chart {
    height: 390px;
    .chart-box {
      border-top: 1px solid #f3f5f8;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      .rank-items {
        margin: 10px 20px;
        &-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        }
        span {
          font-size: 14px;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
    .el-radio-group {
      text-align: center;
      margin: 10px auto;
    }
  }
  .in-common-use {
    &-apps {
      padding: 0 25px 20px 25px;
      .app-items {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;
        height: 60px;
        padding: 0 20px;
        border-radius: 5px;
        &:hover {
          background: #f3f5f8;
        }
        .el-image {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }
    }
  }
  .hot-app {
    .hot-app-apps {
      padding: 0 20px;
      .hot-app-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        margin-bottom: 24px;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          background: #f3f5f8;
        }
        .app-img {
          width: 48px;
          height: 48px;
          background: #999999;
          border-radius: 5px;
          margin-right: 10px;
        }
        .app-desc {
          flex: 1;
          font-size: 14px;
          color: #999999;
          line-height: 1.5;
          .app-name {
            .name {
              color: #333333;
              margin-right: 10px;
            }
          }
          .desc {
            font-size: 12px;
          }
        }
      }
    }
  }
  .more-app {
    padding: 0 20px;
    .more-app-item {
      height: 150px;
      border: 1px solid rgba(247, 247, 247, 1);
      border-radius: 5px;
      margin-bottom: 24px;
      cursor: pointer;
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .el-image {
        min-width: 32px;
        height: 32px;
        border-radius: 3px;
      }
      &-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          width: 100%;
          margin: 0 10px;
        }
      }
      .more-item-desc {
        height: 55px;
        overflow: hidden;
        line-height: 1.5;
        font-size: 12px;
        color: #999;
      }
      .el-link {
        font-size: 12px;
      }
      &:hover {
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
      }
    }
  }
  .empty {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #09f;
  }
}
</style>
